<template>
  <Echarts
    id="echarts"
    height="500px"
    :full-options="echartsOptions"
    :loading="loading"
  >
  </Echarts>
</template>
 
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
// 引进Echarts 组件
import Echarts from "@/components/Echarts/Echarts.vue";
// 引进Echarts 的options配置文件，可根据项目模块来创建该配置文件
// import chartOption from "../../components/Echarts/options";
const loading = ref(false); // 初始值可以根据实际情况设定
const echartsOptions = reactive({
  options: {},
  init: false,
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式，传进options中的两个参数data（图表的数据）和dimension（图表的维度），
onMounted(() => {
  const axisData = [
    [10.0, 8.04],
    [8.07, 6.95],
    [13.0, 7.58],
    [9.05, 8.81],
    [11.0, 8.33],
    [14.0, 7.66],
    [13.4, 6.81],
    [10.0, 6.33],
    [14.0, 8.96],
    [12.5, 6.82],
    [9.15, 7.2],
    [11.5, 7.2],
    [3.03, 4.23],
    [12.2, 7.83],
    [2.02, 4.47],
    [1.05, 3.33],
    [4.05, 4.96],
    [6.03, 7.24],
    [12.0, 6.26],
    [12.0, 8.84],
    [7.08, 5.82],
    [5.02, 5.68],
  ];
  // echartsOptions.options = chartOption.testOption(testData, testDimensions);
  echartsOptions.options = {
    type: "effectScatter", // 指明图表为带涟漪动画的散点图
    showEffectOn: "emphasis", // 出现涟漪动画的时机 render emphasis
    rippleEffect: {
      scale: 10, // 涟漪动画时, 散点的缩放比例
    },

    xAxis: {
      type: "value",
      scale: true,
    },
    yAxis: {
      type: "value",
      scale: true,
    },
    series: [
      {
        type: "scatter",
        data: axisData,
        // symbolSize: 30
        symbolSize: function (arg) {
          // 控制散点的大小
          // console.log(arg)
          var height = arg[0] / 100;
          var weight = arg[1];
          // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
          var bmi = weight / (height * height);
          if (bmi > 28) {
            return 20;
          }
          return 5;
        },
        itemStyle: {
          // 控制散点的样式
          color: function (arg) {
            // console.log(arg)
            var height = arg.data[0] / 100;
            var weight = arg.data[1];
            // bmi = 体重kg / (身高m*身高m)   大于28,就代表肥胖
            var bmi = weight / (height * height);
            if (bmi > 28) {
              return "red";
            }
            return "green";
          },
        },
      },
    ],
  };
});
</script>